<template>
  <div>
    <el-table
      v-loading="load"
      v-fixed-scroll
      :data="list"
      :height="height"
      :highlight-current-row="highlightCurrentRow"
      :header-cell-class-name="headerCellClassName"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      :span-method="spanMethod"
      stripe
      border
      @current-change="handleSelectionChange"
      @selection-change="handleSelectionChangecheck"
      @row-dblclick="dblclick"
      @row-click="rowclick"
      @cell-click="myCellClick"
      @sort-change="sortChange"
    >
      <slot/>
    </el-table>

    <br>
    <!-- 分页 -->
    <div class="center">
      <Pagination
        :data="page"
        @change-size="handleSizeChange"
        @change-page="handleCurrentChange"
        @change-next="handelNext"
        @change-prev="handelPrev"
      />
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  name: 'BaseTable',
  components: {
    Pagination
  },
  props: {
    highlightCurrentRow: {
      type: Boolean,
      default: false
    },
    // eslint-disable-next-line vue/require-prop-types
    height: {},
    rowStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    cellStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // eslint-disable-next-line vue/require-prop-types
    spanMethod: {
      default() {
        return this.spanMethod2
      }
    }
  },
  data() {
    return {
      list: [],
      page: {},
      load: false
    }
  },
  methods: {
    headerCellClassName() {
      return 'baseTable'
    },
    filData(data) {
      this.list = data.rows
      this.page = data
      return this
    },
    wait() {
      this.load = true
      return this
    },
    complete() {
      this.load = false
      return this
    },
    handleSizeChange(size) {
      this.$emit('chaneg-size', this, size)
    },
    handleCurrentChange(current) {
      this.$emit('chaneg-page', this, current)
    },
    handleSelectionChange(val) {
      this.$emit('current-change', val)
    },
    handleSelectionChangecheck(val) {
      this.$emit('selection-change', val)
    },
    dblclick(val) {
      this.$emit('row-dblclick', val)
    },
    handelNext(val) {
      this.$emit('change-next', val)
    },
    handelPrev(val) {
      this.$emit('change-prev', val)
    },
    rowclick(val) {
      this.$emit('row-click', val)
    },
    myCellClick(row, column, cell, event) {
      this.$emit('cell-click', row, column, cell, event)
    },
    spanMethod2(row, column, cell, event) {
      this.$emit('span-method', row, column, cell, event)
    },
    // 列排序
    sortChange(row) {
      this.$emit('sort-change', row)
    },
    getData() {
      return this.list
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .ps__thumb-x{
    //background-color: #DCF1FE !important;
    background-color: #CC020C !important;
  }
  //.ps__thumb-x:hover{
  //  background-color: #CC020C !important;
  //}
}
</style>
